<!DOCTYPE html>
<html lang="zh-cn" xmlns:th="http://www.thymeleaf.org">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>图书管理</title>
    <link rel="stylesheet" th:href="@{/static/css/bootstrap.min.css}">
    <link rel="stylesheet" th:href="@{/static/css/minireset.css}" />
    <link rel="stylesheet" th:href="@{/static/css/common.css}" />
    <link rel="stylesheet" th:href="@{/static/css/cart.css}" />
    <link rel="stylesheet" th:href="@{/static/css/bookManger.css}" />
    <link rel="stylesheet" th:href="@{/static/bs-icons/bootstrap-icons.css}">
  </head>
  <body>
    <div class="header">
      <div class="w">
        <div class="header-left">
          <a href="../manager.html">
            <img th:src="@{/static/img/北大青鸟.jpg}" alt=""
          /></a>
          <h1>图书管理系统</h1>
        </div>
        <div class="header-right">
          <a href="#" class="order">图书管理</a>
          <a href="orderManager.html" class="destory">订单管理</a>
          <a id="re-index" href="#" class="gohome">返回商城</a>
        </div>
      </div>
    </div>
    <div class="list">
      <div class="w">
        <form id="searchForm" th:action="@{/bookManager.html}" method="get" class="mb-2 d-flex justify-content-between">
          <div th:object="${pageData.searchData}" class="row g-2">
            <div class="col-3">
              <input type="text" placeholder="名称 | 支持模糊查询" th:value="*{title}" class="form-control" name="title">
            </div>
            <div class="col-2">
              <input type="number" placeholder="单价 | 小于等于" th:value="*{price}" class="form-control" name="price">
            </div>
            <div class="col-3">
              <input type="text" placeholder="作者 | 支持模糊查询" th:value="*{author}" class="form-control" name="author">
            </div>
            <div class="col-2">
              <input type="number" placeholder="销量 | 大于等于" th:value="*{sales}" class="form-control" name="sales">
            </div>
            <div class="col-2">
              <input type="number" placeholder="库存 | 小于等于" th:value="*{stock}" class="form-control" name="stock">
            </div>
          </div>
          <div class="col-2 d-flex justify-content-end">
            <button type="submit" class="btn btn-success d-flex align-items-center">
              <i class="bi bi-search"></i> 查询
            </button>
            &nbsp;
            <button type="button" onclick="clearFormData()" class="btn btn-outline-success">
              清空
            </button>
          </div>
        </form>
        <div class="mb-2 d-flex">
          <button type="button" class="btn btn-success btn-sm d-flex" button-type="添加图书"
                  data-bs-toggle="modal" data-bs-target="#addAndUpdateModal">
            <i class="bi bi-plus-lg"></i>添加图书
          </button>
          &nbsp;
          <button type="button" class="btn btn-danger btn-sm d-flex" onclick="delAll()">
            <i class="bi bi-trash"></i> 批量删除
          </button>
        </div>
        <table class="table table-hover table-bordered">
          <thead>
            <tr class="table-success">
              <th class="col-1 text-start"><input type="checkbox"> 全选</th>
              <th class="col-2">图片</th>
              <th>图书名称</th>
              <th>价格</th>
              <th>作者</th>
              <th>销量</th>
              <th>库存</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody>
            <tr th:each="book : ${pageData.bookList}">
              <td><input type="checkbox" th:value="${book.id}" ></td>
              <td>
                <img th:src="${book.img_path}" alt="" />
              </td>
              <td th:text="${book.title}">a</td>
              <td th:text="${book.price}">a</td>
              <td th:text="${book.author}" >b</td>
              <td th:text="${book.sales}" >c</td>
              <td th:text="${book.stock}" >d</td>
              <td class="col-2">
                <button type="button" class="btn btn-outline-success btn-sm" button-type="修改图书"
                        data-bs-toggle="modal" data-bs-target="#addAndUpdateModal">修改</button>
                <button type="button" class="btn btn-outline-danger btn-sm" th:onclick="|delBtn(${book.id})|">删除</button>
              </td>
            </tr>
          </tbody>
        </table>

        <div class="footer">
          <nav aria-label="Page navigation example">
            <ul class="pagination">
              <li class="page-item"><a class="page-link" href="#">首页</a></li>
              <!--设置上一页的的按钮样式-->
              <li th:class="|page-item ${pageData.currentPage == 1 ? 'disabled':''}|">
                <a class="page-link" onclick="previous()" href="#">上一页</a>
              </li>
              <!--${#numbers.sequence(1,pageData.pages)} &ndash;&gt; [1,2,3,4,5]-->
              <!--如果p 等于 currentPage 说明当前就是要高亮的标签，需要添加active-->
              <li th:each="p : ${#numbers.sequence(1,pageData.pages)}"
                  th:class="|page-item ${pageData.currentPage == p ? 'active':''}|">
                <a class="page-link" href="#" th:onclick="|pageBtn(${p})|" th:text="${p}">1</a>
              </li>
              <!--下一页的按钮样式-->
              <li th:class="|page-item ${pageData.currentPage == pageData.pages ? 'disabled':''}|">
                <a class="page-link" onclick="next()" href="#">下一页</a>
              </li>
              <li class="page-item"><a class="page-link" href="#">末页</a></li>
            </ul>
          </nav>
          <div class="footer-right">
            <span>共[[${pageData.pages}]]页</span><span>[[${pageData.total}]]条记录</span><span>到第</span>
            <input type="text" class="form-control form-control-sm" /><label>&nbsp;页</label>
            <button type="button" class="btn btn-outline-info btn-sm">确定</button>
          </div>
        </div>
      </div>
    </div>
    <div class="bottom">
      <div class="w">
        <div class="top">
          <ul>
            <li>
              <a href="">
                <img th:src="@{/static/img/bottom1.png}" alt="" />
                <span>大咖级讲师亲自授课</span>
              </a>
            </li>
            <li>
              <a href="">
                <img th:src="@{/static/img/bottom.png}" alt="" />
                <span>课程为学员成长持续赋能</span>
              </a>
            </li>
            <li>
              <a href="">
                <img th:src="@{/static/img/bottom2.png}" alt="" />
                <span>学员真是情况大公开</span>
              </a>
            </li>
          </ul>
        </div>
        <div class="content">
          <dl>
            <dt>关于我们</dt>
            <dd>教育理念</dd>
            <!-- <dd>名师团队</dd>
            <dd>学员心声</dd> -->
          </dl>
          <dl>
            <dt>资源下载</dt>
            <dd>视频下载</dd>
            <!-- <dd>资料下载</dd>
            <dd>工具下载</dd> -->
          </dl>
          <dl>
            <dt>加入我们</dt>
            <dd>招聘岗位</dd>
            <!-- <dd>岗位介绍</dd>
            <dd>招贤纳师</dd> -->
          </dl>
          <dl>
            <dt>联系我们</dt>
            <dd>http://www.qingniao.com</dd>
            <dd></dd>
          </dl>
        </div>
      </div>
      <div class="down">
        Copyright (c) 北大青鸟成都天府校区（成都青鸟信息技术教育发展有限公司） All Rights Reserved.
      </div>
    </div>

    <!--添加信息的模态窗口
    手动关闭模态框的代码：
    var myModalEl = document.getElementById('myModal')
    bootstrap.Modal.getInstance(myModalEl).hide()
    -->
    <div class="modal fade" id="addAndUpdateModal" tabindex="-1" aria-labelledby="addModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title">添加图书</h5>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div class="modal-body mx-4">
            <!--novalidate 开启bootstrap5官方默认的自定义表单校验模式-->
            <form class="row g-2" id="modalForm" method="post" enctype="multipart/form-data" novalidate >
              <!--这个是预留的在修改时显示id的位置-->
              <div class="col-auto">
                <div class="idDiv" style="width: 300px;"></div>
              </div>
              <div class="col-auto">
                <label class="control-label">图书名称</label>
                <div style="width: 300px;">
                  <input type="text" name="title" class="form-control" placeholder="图书名称" required />
                  <!--表单校验的错误提示信息-->
                  <div class="invalid-feedback">
                    图书名称不能为空
                  </div>
                </div>
              </div>
              <div class="col-auto">
                <label class="control-label">图书封面图片</label>
                <div style="width: 240px;">
                  <input type="file" name="img_path" class="form-control" />
                </div>
              </div>
              <div class="col-auto">
                <label class="control-label">图书作者</label>
                <div style="width: 240px;">
                  <input type="text" name="author" class="form-control" placeholder="作者"
                         required pattern="[\u4e00-\u9fa5]{1,}" />
                  <!--表单校验的错误提示信息-->
                  <div class="invalid-feedback">
                    作者名必须是汉字且不能为空
                  </div>
                </div>
              </div>
              <div class="col-auto">
                <label class="control-label">图书价格</label>
                <div style="width: 240px;">
                  <input type="text" name="price" class="form-control" placeholder="价格"
                         required pattern="[0-9]+(.[0-9]{1,2})?" />
                  <!--表单校验的错误提示信息-->
                  <div class="invalid-feedback">
                    必须输入数字且小数位不能超过两位
                  </div>
                </div>
              </div>
              <div class="col-auto">
                <label class="control-label">图书库存</label>
                <div style="width: 240px;">
                  <input type="number" name="stock" class="form-control" min="1" max="1000" placeholder="库存" required  />
                  <!--表单校验的错误提示信息-->
                  <div class="invalid-feedback">
                    库存数量必须大于1且小于1000
                  </div>
                </div>
              </div>
            </form>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-outline-info btn-sm" data-bs-dismiss="modal">取消</button>
            <!--因为当前button提交按钮在form标签外部，需要使用form属性对form标签进行关联-->
            <button type="submit" form="modalForm" class="btn btn-primary btn-sm">确定</button>
          </div>
        </div>
      </div>
    </div>

    <script th:src="@{/static/script/jquery-1.12.4.min.js}"></script>
    <script th:src="@{/static/script/bootstrap.bundle.min.js}" ></script>
    <script th:src="@{/static/script/common.js}"></script>
    <script>

      (function () {
        // 获取表单元素
        let form = document.getElementById("modalForm")
        // 添加事件
        form.addEventListener('submit', function (event) {
          if (!form.checkValidity()) {
            event.preventDefault()
            event.stopPropagation()
          }

          form.classList.add('was-validated')
        }, false)
      })()

      // 操作模态框，当前一个模态框应用新增和修改两种业务场景
      // 页面启动会自动执行
      $(function () {
        // 获取模态框，官方代码
        var exampleModal = document.getElementById('addAndUpdateModal')
        // 绑定一个模态框显示时的监听事件
        exampleModal.addEventListener('show.bs.modal', function (event) {
          // 获取按钮对象
          const button = event.relatedTarget
          // 获取自定义属性设置的数据（点击按钮绑定的用来区分当前是添加还是修改的标识）
          const btnType = button.getAttribute('button-type')
          // 直接将获取的标识数据作为模态框标题
          $('.modal-title').text(btnType)

          // 1. 如果是添加商品，需要移除隐藏域标签和记录gid的只读input标签
          if (btnType === "添加图书") {
            // 移除记录id的只读标签，因为添加时不需要id
            $(".idDiv input").remove()
            // // 清空表单数据
            $("#modalForm input[name='title']").val('')
            $("#modalForm input[name='author']").val('')
            $("#modalForm input[name='price']").val('')
            $("#modalForm input[name='stock']").val('')

            // 如果是添加就绑定action的属性值为 添加的接口
            $("#modalForm").attr("action","books/add")
          }

          // 2. 如果是修改商品，需要添加记录id的只读标签
          if (btnType === "修改图书") {
            // 条件的目的是防止元素重复添加
            if ($('.idDiv input').length === 0){
              // 添加id的只读标签
              $('.idDiv').append(`<input type='text' class='form-control' name='id' readonly />`)
            }

            // 回显数据
            // 根据按钮获取父标签(td),再获取所有兄弟标签(除了按钮所在的其他所有存数据的td)
            let tds = $(button).parent().siblings()
            console.log(tds)
            $("#modalForm input[name='id']").val(tds.eq(0).children().val())
            $("#modalForm input[name='title']").val(tds.eq(2).text())
            $("#modalForm input[name='author']").val(tds.eq(4).text())
            $("#modalForm input[name='price']").val(tds.eq(3).text())
            $("#modalForm input[name='stock']").val(tds.eq(6).text())

            // 如果是修改就绑定action的属性值为 修改的接口
            $("#modalForm").attr("action","books/update")
          }
        })
      })

      // 删除图书功能
      function delBtn(bid){
          // 删除是需求提醒用户的操作
          if (confirm("你确定要删除当前行吗?")){
              // 执行删除动作
              location.assign("books/delete?bid="+bid);
          }
      }

      // 批量删除
      function delAll() {
        // 获取当前要删除的ids
        // 1. 获取当前用户选中的所有的input
        let inputs = $(".table tbody input:checked")
        if (inputs.length === 0){
          alert("你还没有选中任何数据，请选择数据后再删除!")
          return;
        }
        // 遍历inputs，获取value中的 id，拼接为 bid=value&bid=value&bid=value
        let tdsParam = '';
        inputs.each(function (i,e) {
          tdsParam = tdsParam + "bid=" + $(e).val() + "&"
        })
        // 测试代码，控制台查看拼接结果
        console.log(tdsParam)
        // 发送请求
        if (confirm("确定要删除选中的这些行吗?")) {
          // 发送请求
          location.href = "books/delete?" + tdsParam;
        }
      }

      // 查询表单的清空按钮
      function clearFormData(){
          // 直接不带任何参数发送请求，就会清空上次的所有记录的数据
          location.href = "bookManager.html";
      }

      // 上一页
      function previous(){
        // 获取当前的page页
        let currentPage = [[${pageData.currentPage}]];
        // 调用分页按钮的事件方法，将当前页 + 1 再赋值就可以实现查询
        pageBtn(currentPage - 1);
      }

      // 分页按钮的点击功能
      function pageBtn(page){
        // 获取查询表单的数据，通过jQuery
        let formData = $("#searchForm").serialize()
        // 需要的表单数据时 key=value&key=value
        location.href = "bookManager.html?page=" + page + "&" + formData;
      }

      // 下一页
      function next(){
         // 获取当前的page页
         let currentPage = [[${pageData.currentPage}]];
         // 调用分页按钮的事件方法，将当前页 + 1 再赋值就可以实现查询
         pageBtn(currentPage + 1);
      }

    </script>
  </body>
</html>
